<template>
  <el-dialog
    width="100%"
    top="0px"
    :fullscreen="true"
    :title="this.title"
     class="label_font"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm"  label-width="160px">

    <el-row  >
      <el-col :span="12"   >
            <el-form-item label="合同备案号" prop="contractno" class="label_font" >
              <el-input v-model="dataForm.contractno" placeholder="合同备案号" :readonly=true style="100%" disabled></el-input>
            </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label="合同备案类型" prop="ctype" class="label_font">
            <el-select v-model="dataForm.ctype" placeholder="合同备案类型" style="width:100%" disabled>
                <el-option
                  v-for="item in dataForm.contractTypeList"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>

      <el-col :span="12">
          <el-form-item label="不动产所属地市" prop="seRegion" class="label_font">
              <el-select  @change="selectChanged" v-model="dataForm.seRegion" 
              disabled
                placeholder="不动产所属地市" style="width:100%">
              <el-option
                v-for="item in dataForm.seRegionList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
          </el-select>
          </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label="不动产所属区县" prop="region" class="label_font">
            <el-select v-model="dataForm.region" placeholder="不动产所属区县" style="width:100%" disabled>
                <el-option
                  v-for="item in dataForm.regionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
            </el-select>
          </el-form-item>
      </el-col>

    </el-row>


    <el-row>
      <el-col :span="12">
          <el-form-item label="代理人联系电话" prop="rightagentphone" class="label_font">
            <el-input v-model="dataForm.rightagentphone" placeholder="代理人联系电话" disabled></el-input>
          </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item label="权利人代理人名称" prop="rightagentname" class="label_font">
            <el-input v-model="dataForm.rightagentname" placeholder="权利人代理人名称" disabled></el-input>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
          <el-form-item label="权利人代理人类型" prop="rightagenttype" class="label_font">
            <el-select v-model="dataForm.rightagenttype" placeholder="权利人代理人类型" disabled style="width:100%">
            </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item label="权利人代理人证件类型" prop="rightagentidtype" class="label_font">
            <el-select v-model="dataForm.rightagentidtype" placeholder="权利人代理人证件类型" disabled style="width:100%">
            </el-select>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="权利人代理人证件号码" prop="rightagentidcard" class="label_font">
          <el-input v-model="dataForm.rightagentidcard" placeholder="权利人代理人身份证号码" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="合并编码"  prop="babsm"  class="label_font">
          <el-input  placeholder="系统自动生成" v-model="dataForm.babsm" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  

    <el-row>
      <el-col :span="12">
          <el-form-item label="不动产单元号" prop="realtyunitno" class="label_font">
            <el-input v-model="dataForm.realtyunitno" placeholder="不动产单元号" disabled></el-input>
          </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item label="用途" prop="fwyt" class="label_font">
        <el-input v-model="dataForm.fwyt" placeholder="用途" disabled></el-input>
          </el-form-item>
      </el-col>
    </el-row>    

   


    <el-row>
      <el-col :span="12">
        <el-form-item label="办理点" prop="site" class="label_font">
          <el-select v-model="dataForm.site" placeholder="办理点" disabled style="width:100%">
                <el-option
                  v-for="item in dataForm.siteList"
                  :key="item.siteno"
                  :label="item.sitename"
                  :value="item.siteno">
                </el-option>
            </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12" v-if="false">
        <el-form-item label="领证方式" prop="gettype" class="label_font">
             <el-select v-model="dataForm.gettype" placeholder="领证方式" disabled style="width:100%">

            </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="附记" prop="fj" class="label_font">
              <el-input v-model="dataForm.fj" placeholder="附记" disabled></el-input>
        </el-form-item>
      </el-col>

    </el-row>


        <el-row>
      <el-col :span="12">
        <el-form-item label="领证人" prop="lzr" class="label_font">
              <el-input v-model="dataForm.lzr" placeholder="领证人" disabled ></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="领证时间" prop="lzsj" class="label_font">
             <el-date-picker
             disabled
             style="width:100%"
             format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
          v-model="dataForm.lzsj"
          type="date"
          placeholder="选择结束时间"
          align="right"
        >
        </el-date-picker>
        </el-form-item>
      </el-col>

    </el-row>

    <el-row v-if="this.step == 0">
    <el-table
      :data="qlrList"
      border
      :header-cell-style="{color:'#333', fontSize:'14px',fontWeight:'bold'}"
      v-loading="dataListLoading"
      style="width: 100%;">

      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="权利人名称">
      </el-table-column>
      <el-table-column
        prop="ptype"
        header-align="center"
        align="center"
        label="权利人类型">
      </el-table-column>
      <el-table-column
        prop="idtype"
        header-align="center"
        align="center"
        label="权利人证件类型">
      </el-table-column>
      <el-table-column
        prop="idcode"
        header-align="center"
        align="center"
        label="权利人证件号码">
      </el-table-column>
      <el-table-column
        prop="protion"
        header-align="center"
        align="center"
        label="权利比例">
      </el-table-column>

    </el-table>
    </el-row>

    <el-row v-if="this.step == 0">
    <el-table
      :data="ywrList"
      border
      :header-cell-style="{color:'#333', fontSize:'14px',fontWeight:'bold'}"
      v-loading="dataListLoading"
      style="width: 100%;" >

            <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="义务人名称">
      </el-table-column>
      <el-table-column
        prop="ptype"
        header-align="center"
        align="center"
        label="义务人类型">
      </el-table-column>
      <el-table-column
        prop="idtype"
        header-align="center"
        align="center"
        label="义务人证件类型">
      </el-table-column>
      <el-table-column
        prop="idcode"
        header-align="center"
        align="center"
        label="义务人证件号码">
      </el-table-column>
      <el-table-column
        prop="protion"
        header-align="center"
        align="center"
        label="权利比例">
      </el-table-column>

    </el-table>
    </el-row>

    
    <el-row v-if="this.step != 0">
    <el-table
      :data="qlrList"
      border
      :header-cell-style="{color:'#333', fontSize:'14px',fontWeight:'bold'}"
      v-loading="dataListLoading"
      style="width: 100%;">

      <el-table-column
        prop="MC"
        header-align="center"
        align="center"
        label="权利人名称">
      </el-table-column>
      <el-table-column
        prop="TYPE"
        header-align="center"
        align="center"
        label="权利人类型">
      </el-table-column>
      <el-table-column
        prop="ZJLB"
        header-align="center"
        align="center"
        label="权利人证件类型">
      </el-table-column>
      <el-table-column
        prop="ZJHM"
        header-align="center"
        align="center"
        label="权利人证件号码">
      </el-table-column>
      <el-table-column
        prop="QLBL"
        header-align="center"
        align="center"
        label="权利比例">
      </el-table-column>

    </el-table>
    </el-row>

    <el-row v-if="this.step != 0">
    <el-table
      :data="ywrList"
      border
      :header-cell-style="{color:'#333', fontSize:'14px',fontWeight:'bold'}"
      v-loading="dataListLoading"
      style="width: 100%;" >


      <el-table-column
        prop="MC"
        header-align="center"
        align="center"
        label="义务人名称">
      </el-table-column>
      <el-table-column
        prop="TYPE"
        header-align="center"
        align="center"
        label="义务人类型">
      </el-table-column>
      <el-table-column
        prop="ZJLB"
        header-align="center"
        align="center"
        label="义务人证件类型">
      </el-table-column>
      <el-table-column
        prop="ZJHM"
        header-align="center"
        align="center"
        label="义务人证件号码">
      </el-table-column>
      <el-table-column
        prop="QLBL"
        header-align="center"
        align="center"
        label="权利比例">
      </el-table-column>

    </el-table>
    </el-row>

    <el-row  >
      <el-col :span="12">
          <el-row align="center" justify="center" >
              <el-col :span="24">

                  <div class="xwbl cell_border">权利人询问笔录</div>
              </el-col>
          </el-row>
          <el-row>
                <el-col :span="12" class="xwbl_item cell_border">是否为真实意思表示 ？</el-col>
                <el-col :span="12" class="xwbl_item cell_border">
                                 <el-radio-group v-model="dataForm.left1" disabled>
               <el-radio label="1">是</el-radio>
               <el-radio label="0">否</el-radio>
             </el-radio-group>
                </el-col>
          </el-row>
                    <el-row>
                <el-col :span="12" class="xwbl_item cell_border_bottom">是否为共有房屋 ？</el-col>
                <el-col :span="12" class="xwbl_item cell_border_bottom">
                                 <el-radio-group v-model="dataForm.left2" disabled>
               <el-radio label="1">是</el-radio>
               <el-radio label="0">否</el-radio>
             </el-radio-group>
                </el-col>
          </el-row>


      </el-col>
      <el-col :span="12">
          <el-row>
              <el-col :span="24">

                  <div class="xwbl cell_border">义务人询问笔录</div>
              </el-col>
          </el-row>
                    <el-row>
                <el-col :span="12" class="xwbl_item cell_border">是否为真实意思表示 ？</el-col>
                <el-col :span="12" class="xwbl_item cell_border">
                                 <el-radio-group v-model="dataForm.right1" disabled>
               <el-radio label="1">是</el-radio>
               <el-radio label="0">否</el-radio>
             </el-radio-group>
                </el-col>
          </el-row>

           <el-row>
                <el-col :span="12" class="xwbl_item cell_border_bottom">是否为共有房屋 ？</el-col>
                <el-col :span="12" class="xwbl_item cell_border_bottom" >
                <el-radio-group v-model="dataForm.right2" disabled>
               <el-radio label="1">是</el-radio>
               <el-radio label="0">否</el-radio>
                    </el-radio-group>
                </el-col>
          </el-row>


      </el-col>
    </el-row>

<el-collapse accordion>
  <el-collapse-item>
    <template slot="title"  class="label_font"  >
     <font style="font-size:14px;">文件列表</font>
    </template>

<el-row >
    <el-table
      :data="fileList"
      border
      :header-cell-style="{color:'#333', fontSize:'14px',fontWeight:'bold'}"
      v-loading="dataListLoading"
      style="width: 100%;" >


      <el-table-column
        prop="yxdl"
        header-align="center"
        align="center"
        label="影像大类">
      </el-table-column>
      <el-table-column
        prop="ctype"
        header-align="center"
        align="center"
         width="200px"
        label="影像类别">
      </el-table-column>
      <el-table-column
        prop="fname"
        header-align="center"
        align="center"
        width="500px"
        label="影像文件">
      </el-table-column>
      <el-table-column
        prop="yxbabsm"
        header-align="center"
        align="center"
        label="影像备案标识码">
      </el-table-column>

    </el-table>
    </el-row>


  </el-collapse-item>

</el-collapse>




    </el-form>
    <span slot="footer" class="dialog-footer">

      <el-button @click="visible = false">关闭</el-button>

    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        url: '',
        title: '',

        dataListLoading: false,
        qlrList: [],
        ywrList: [],
        fileList: [],
        seqno: 0,
        step: 0,


        dataForm: {
          seqno: 0,
          contractno: '',
          ctype: '',

          rightagentphone: '',
          rightagentname: '',
          realtyunitno: '',
          region: '',
          seRegion: '',

          fwyt: '',
          siteList: [],

          contractTypeList: [],
          seRegionList: [],
          regionList:[],

          bankList: [],
          seRegionList: [],

          gettype: '',
          rightagenttype: '个人',
          rightagentidtype: '身份证',
          babsm: '',
          rightagentidcard: '',
          site: '',

          left1: '',
          left2: '',
          left3: '',
          left4: '',    
          right1: '',
          right2: '',
          right3: '',
          right4: ''
        },
        dataRule: {
          

        }
      }
    },
    methods: {
      init (id, step) {

        this.seqno = id
  
        this.visible = true

        this.dataForm.gettype = '电子证明';
        this.step = step;
        this.title = '详情明细';
       
        this.$http({
          url: this.$http.adornUrl(`/bdc/bdcnoticeregist/item/list`),
              method: 'get',
              params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
                this.dataForm.siteList = data.siteList
                this.dataForm.contractTypeList = data.contractTypeList
                this.dataForm.seRegionList = data.regionList
 
            }
        })

        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
      
            this.dataListLoading = true;

            this.$http({
                  url: this.$http.adornUrl(`/bdc/bdcnoticeregist/info/${this.seqno}`),
                  method: 'get',
                  params: this.$http.adornParams()
                }).then(({data}) => {
                  if (data && data.code === 0) {


                    this.dataForm.seRegion = data.noticeRegister.seRegion
                    this.dataForm.region = data.noticeRegister.region

                    this.dataForm.contractno = data.htba.HTBAH
                    this.dataForm.ctype = data.htba.HTLX

                    this.dataForm.realtyunitno = data.realtyunitno
                    this.dataForm.fwyt = data.fwyt

                    this.qlrList = data.qlrList
                    this.ywrList = data.ywrList
                    this.fileList = data.fileList

                    this.dataForm.lzr = data.noticeRegister.lzr
                    this.dataForm.lzsj = data.noticeRegister.lzsj 
                    this.dataForm.fj = data.noticeRegister.fj

                    this.dataForm.babsm = data.noticeRegister.babsm
                    if (this.step == 2){
                      this.dataForm.babsm = ''
                    }
                    this.dataForm.site = data.noticeRegister.siteno

                    this.dataForm.rightagentname = data.qlrdlr.MC
                    this.dataForm.rightagentphone = data.qlrdlr.LXDH
                    this.dataForm.rightagentidcard = data.qlrdlr.ZJHM
                    this.dataForm.left1 = data.qlrXwbl.SFYYZS
                    this.dataForm.left2 = data.qlrXwbl.SFGY
                    this.dataForm.right1 = data.ywrXwbl.SFYYZS
                    this.dataForm.right2 = data.ywrXwbl.SFGY
                    this.dataForm.site = data.noticeRegister.bld

                  }
                  this.dataListLoading = false;
                })
            
            
          
        })
      },

      selectChanged(value){
          this.dataForm.region = '';
          this.$http({
          url: this.$http.adornUrl(`/sys/bdcregion/listByLevle`),
              method: 'get',
              params: this.$http.adornParams({'upregion':value})
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.regionList = data.list
            }
        })
      }


    }
  }
</script>
<style>
.el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #313b50;
  cursor: not-allowed;
}
</style>